import { Ref } from "vue";
import "./index.scss";
import VScaleScreen from "v-scale-screen";
import RightImg from "@/assets/images/iot/header/right.png";
export default defineComponent({
	props: [],
	emits: [],
	setup() {
		let timer: Ref<NodeJS.Timer | undefined> = ref();
		let currentTimer: Ref<NodeJS.Timer | undefined> = ref();
		let leftRef = ref(),
			centerRef = ref(),
			rightRef = ref();
		let currentTime = ref<string>(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
		const setTimer = () => {
			timer.value ? clearInterval(timer.value) : "";
			timer.value = setInterval(() => {
				leftRef.value.init();
				centerRef.value.init();
				rightRef.value.init();
			}, 10000);

			currentTimer.value = setInterval(() => {
				currentTime.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
			}, 1000);
		};
		onMounted(() => {
			leftRef.value.init();
			centerRef.value.init();
			rightRef.value.init();
			setTimer();
			loadData();
		});
		const { getDeviceCount, deviceTotal, deviceTypeTotal } = useDeviceTotal();
		provide("deviceTotal", deviceTotal.value);
		provide("deviceTypeTotal", deviceTypeTotal.value);
		const loadData = async () => {
			await getDeviceCount();
		};
		onUnmounted(() => {
			timer.value ? clearInterval(timer.value) : "";
			currentTimer.value ? clearInterval(currentTimer.value) : "";
		});
		return () => {
			return (
				<VScaleScreen width="1920" height="1080">
					<div class="big-sereen-container">
						<div class="top-title-bg">
							<span class="timer flex-1">{currentTime.value}</span>
							<span class="top-system-title flex-1">智能配电房</span>
							<div class="r cursor-pointer flex-1 justify-end" onClick={() => gotoPage(RouterPath.deviceList, {})}>
								<p>返回管理平台</p>
								<img src={RightImg} alt="" />
							</div>
						</div>
						<div class="main">
							<div class="left">
								<Left ref={leftRef} />
							</div>
							<div class="center">
								<Center ref={centerRef} />
							</div>
							<div class="right">
								<Right ref={rightRef} />
							</div>
						</div>
					</div>
				</VScaleScreen>
			);
		};
	}
});

import Overview from "./components/left/overview";
import DeviceStatus from "./components/left/device";
import AlarmTrend from "./components/left/alarmTrend";
import AlarmRank from "./components/left/alarmRank";
const Left = defineComponent({
	setup(props, ctx) {
		const init = () => {};
		ctx.expose({
			init
		});
		return () => {
			return (
				<>
					<div class="left-item t">
						<div class="title-block">
							<div class="text">系统概述</div>
						</div>
						<Overview />
					</div>
					<div class="left-item">
						<div class="title-block">
							<div class="text">设备状态</div>
						</div>
						<DeviceStatus />
					</div>
					<div class="left-item">
						<div class="title-block">
							<div class="text">近七日告警</div>
						</div>
						<AlarmTrend />
					</div>
					<div class="left-item">
						<div class="title-block">
							<div class="text">告警排名</div>
						</div>
						<AlarmRank />
					</div>
				</>
			);
		};
	}
});

import Topo from "./components/center/topo";
import Total from "./components/center/total";
import Device from "./components/center/device";
import Report from "./components/center/report";
const Center = defineComponent({
	setup(props, ctx) {
		let reportRef = ref();
		const init = () => {
			reportRef.value.init();
		};
		ctx.expose({
			init
		});
		return () => {
			return (
				<div class="master-contain">
					<div class="total-panel">
						<Total />
					</div>
					<div class="topo-panel">
						<Topo />
					</div>
					<div class="device-panel">
						<Device />
					</div>
					<div class="bottom">
						<Report ref={reportRef.value} />
					</div>
				</div>
			);
		};
	}
});
import Video from "./components/right/video";
import Event from "./components/right/event";
import DeviceType from "./components/right/device";
import { gotoPage } from "@/utils/routerUtil";
import { RouterPath } from "@/enums/routerPath";
import { useDeviceTotal } from "./hooks/useDeviceTotal";
import { dayjs } from "element-plus";
const Right = defineComponent({
	setup(props, ctx) {
		const init = () => {};
		ctx.expose({
			init
		});
		return () => {
			return (
				<>
					<div class="right-item">
						<div class="title-block">
							<div class="text">设备类型分布</div>
						</div>
						<DeviceType />
					</div>
					<div class="right-item right-list">
						<div class="title-block">
							<div class="text">告警事件</div>
						</div>
						<Event />
					</div>
					<div class="right-item right-video">
						<div class="title-block">
							<div class="text">实时视频</div>
						</div>
						<div class="video-contain">
							<Video />
						</div>
					</div>
				</>
			);
		};
	}
});
